<template>
  <div class="address-main">
    <div class="address-header" style="margin-top: 20px">
      <van-icon name="arrow-left" :size="28" @click="goBack" />
      <div class="center">{{ $t('h.COLLECT_TITLE') }}</div>
      <van-icon name="delete-o" :size="28" @click="clearFavoriteProducts" />
    </div>
    <div class="collect-list">
      <!--      <van-button @click="clearFavoriteProducts" block style="margin-bottom: 10px;">-->
      <!--        <van-icon name="delete"></van-icon>-->
      <!--        {{$t('h.CLEAR_ALL_FAVORITE_PRODUCTS')}}</van-button>-->
      <div
        class="box"
        v-for="item in favoriteProducts"
        @click="goGoodsDetail(item.id, item.shopId)"
      >
        <img :src="item.mainimage" alt="" />
        <div class="right">
          <p class="title">{{ item.name }}</p>
          <p class="money">${{ item.price }}</p>
          <!--          <p class="sale">销售量：150</p>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  data() {
    return {
      active: 0,
    };
  },
  computed: {
    ...mapGetters(['favoriteProducts']),
  },
  methods: {
    ...mapActions(['clearFavoriteProducts']),
    goGoodsDetail(id, shopId) {
      this.$router.push({
        path: '/goods',
        query: {
          id: id,
          shop: shopId,
        },
      });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="scss">
.address-main {
  width: 100%;
  padding: 0 3%;
  box-sizing: border-box;
  min-height: 100vh;
  background: #fff;

  .address-header {
    padding: 0 3%;
    box-sizing: border-box;
    width: 100%;
    height: 45px;
    display: flex;
    background: #fff;
    justify-content: center;
    align-items: center;
    position: relative;

    span {
      position: absolute;
      left: 10px;
    }

    .center {
      width: 100%;
      height: 45px;
      text-align: center;
      line-height: 45px;
      font-size: 15px;
    }
  }
  .collect-list {
    width: 100%;
    padding: 3%;
    box-sizing: border-box;
    .box {
      width: 100%;
      height: 100px;
      border-radius: 5px;
      border: 1px solid #eee;
      padding: 3%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      img {
        width: 60px;
        height: 60px;
      }
      .right {
        width: 100%;
        height: 80px;
        margin-left: 20px;
        .title {
          font-size: 14px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
          box-orient: vertical;
          -webkit-line-clamp: 3;
          line-clamp: 3;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .money {
          font-size: 14px;
          color: #002fff;
          font-weight: 600;
          margin-top: 5px;
        }
        .sale {
          width: 100%;
          color: #aaa;
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
